<template>
  <div>
    <s-nav-bar :title="$route.meta.title"></s-nav-bar>
    <div class="popup-btn vh-c" @click="show = true">{{ pageNo * listMax + 1 }}-{{ (pageNo + 1) * listMax }}章<van-icon
        name="arrow-down" /></div>
    <van-popup class="popup" v-model="show" position="top">
      <ul>
        <li v-for="(item, index) in totalPage" :key="index" :class="{ 'more-list-active': (index == pageNo) }">
          <span @click="changeSection(index)">{{ index * listMax + 1 }}-{{ (index + 1) * listMax }}</span>
        </li>
      </ul>
    </van-popup>
    <div v-show="loading" class="loading-outer">
      <van-loading type="spinner" size="24px" vertical>加载中...</van-loading>
    </div>
    <section-list @link="changeArticle" :data="curChapterList"></section-list>
  </div>
</template>

<script>
import SectionList from '@/components/SectionList.vue'
import sNavBar from '@/components/sNavBar.vue'
export default {
  components: {
    SectionList,
    sNavBar
  },
  data() {
    return {
      show: false,
      loading: false,
      datalist: [],
      pageNo: 0, //当前页位置
      listMax: 100, //目录长度
    }
  },
  computed: {
    curChapterList() {
      let { pageNo, listMax, datalist } = this;
      return (datalist || []).slice(pageNo * listMax, (pageNo + 1) * listMax);
    },
    totalPage() {
      let { datalist } = this;
      if (datalist.length > 0) {
        return new Array(Math.ceil(this.datalist.length / this.listMax)).fill(1);
      }
      return [];
    }
  },
  activated() {
    if (this.$route.params.rootPath) {
      this.resetData()
    }
    this.getList()
  },
  methods: {
    resetData() {
      this.show = false;
      this.loading = false;
      this.pageNo = 0;
      this.datalist = [];
    },
    getList() {
      let { rootPath = '' } = this.$route.params;
      if (!rootPath) {
        return
      }
      this.loading = true;
      this.$bqg.getChapter(rootPath).then(res => {
        this.datalist = Object.freeze(res || []);
        this.loading = false;
      })
    },
    changeSection(index) {
      if (index == this.pageNo) {
        return
      }
      this.pageNo = index;
      this.show = false;
    },
    changeArticle(path) {
      const { rootPath = '', data } = this.$route.params;
      this.$router.push({
        name: 'articleView',
        params: {
          path: path,
          rootPath: rootPath,
          data: data
        }
      })
    },
  }
}
</script>

<style scoped>
.popup-btn {
  position: relative;
  z-index: 6666;
  padding: 0 15px;
  font-size: 13px;
  line-height: 36px;
  color: #aaa;
  background: #f8f8f8;
}

.popup {
  margin-top: 50PX;
  padding-top: 36px;
  max-height: 30vh;
  font-size: 14px;
}

.popup ul {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
}

.popup li {
  width: 30%;
  text-align: center;
  border: 1px solid #ff976a;
  border-radius: 99px;
  margin-bottom: 13px;
  box-sizing: border-box;
  margin-left: 1.5%;
  margin-right: 1.5%;
}

.popup li>span {
  width: 100%;
  line-height: 30px;
  color: #ff976a;
  display: block;
}

.more-list-active {
  background: #ff976a;
}

.more-list-active>span {
  color: #fff !important;
}

.loading-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #fff;
}
</style>